<template>
	<view class="container">
		<!-- <u-navbar leftIconSize="40" placeholder titleStyle="font-size:36rpx;font-weight:600;" title="参数填写" bgColor="#ffffff" :autoBack="true"></u-navbar> -->
		<view class="main">
			<view class="style">
				<view class="flex jc_between">
					<view class="style-title">风格</view>
					<view class="style-select" @click="back">重新选择</view>
				</view>
				<view class="flex">
					<view class="style-item">{{styleName}}</view>
				</view>
			</view>
			<view class="setting">
				 <u-radio-group
				    v-model="sex"
				    placement="row"
					style="margin-bottom: 20rpx;"
				  >
					<view style="font-size: 28rpx;font-weight: bold;margin-right: 20rpx;">性别：</view>
				    <u-radio activeColor="#3AC9B5" size="28" label="男" name="1"></u-radio>
					<u-radio activeColor="#3AC9B5" style="margin-left: 20rpx;" size="28" label="女" name="0"></u-radio>
				  </u-radio-group>
				<view class="setting-textarea">
					<view class="before_title">一个{{ sex == '1'?'男人':'女人' }}</view>
					<textarea class="textarea" v-model="obverse" placeholder="请输入描述内容 (如:穿着沙裤在海边数)"></textarea>
				</view>
				<u-radio-group
				   v-model="mediaType"
				   placement="row"
					style="margin: 20rpx 0;"
				 >
					<view style="font-size: 28rpx;font-weight: bold;margin-right: 20rpx;">类型：</view>
				   <u-radio activeColor="#3AC9B5" size="28" label="图片" name="1"></u-radio>
					<u-radio activeColor="#3AC9B5" style="margin-left: 20rpx;" size="28" label="视频" name="2"></u-radio>
				 </u-radio-group>
				<view class="setting-title">文件上传</view>
				<view class="setting-upfile" @click="chooseImage">
					<image v-if="!annex" class="upfile-add" src="/static/image/add.png"></image>
					<image v-else class="upfile-add" :src="annex"></image>
				</view>
			</view>
			<view class="footer bg-white">
				<view class="footer-fixed flex">
					<view class="footer-btn2" @click="born(2)">预览</view>
					<view class="footer-btn flex1" @click="born(1)">消耗算力:{{cost}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:'',
				annex:'',
				styleName:'',
				obverse:'',
				requestStatus:false,
				sex:'1', // 性别
				mediaType:'1',// 1 图片 2视频
			}
		},
		onLoad() {
			this.getStyleName()
		},
		methods: {
			upload(filePath){
				return new Promise((resolve, reject)=>{
					uni.uploadFile({
						url:'/api/common/upload',
						filePath: filePath,
						name: 'file',
						header:{
							token:uni.getStorageSync('token')
						},
						success:(res)=>{
							let data = JSON.parse(res.data)
							if(data.code==1){
								resolve(data)
							}else{
								reject(data)
								uni.showToast({
									title:data.msg,
									icon:'none'
								})
							}
						},
						fail: (res) => {
							reject(res)
						}
					})
				})
			},
			born(type){
				if(!this.annex){
					uni.showToast({
						title:'请上传文件！',
						icon:'none'
					})
					return false
				}
				
				if(this.requestStatus){
					return false
				}
				this.requestStatus = true
				if(type==1){
					uni.showModal({
						title:'提示',
						content:'是否确定消耗'+this.cost+'算力！',
						success: (res) => {
							if(res.confirm){
								this.post('tool/born',{
									tool_id:this.tool_id,
									style_id:this.style_id,
									obverse: (this.sex == '1' ?'一个男人':'一个女人') + this.obverse,
									is_image:this.mediaType, // 1 图片 2视频
									reverse:'',
									annex:this.annex,
									type
								}).then(res=>{
									this.requestStatus = false
									uni.showToast({
										title:'正在生成中！',
										success: (res2) => {
											setTimeout(()=>{
												uni.switchTab({
													url:'/pages/user/user'
												})
											},1500)
										}
									})
								}).catch(res=>{
									this.requestStatus = false
									if(res.code==-1){
										uni.showToast({
											title:res.msg,
											icon:'none',
											success: (res) => {
												setTimeout(()=>{
													uni.navigateTo({
														url:'/pages/recharge/recharge'
													})
												},1500)
											}
										})
										
									}
									console.log(res)
								})
							}else{
								this.requestStatus = false
							}
						}
					})
				}else{
					this.post('tool/born',{
						tool_id:this.tool_id,
						style_id:this.style_id,
						obverse:this.obverse,
						reverse:'',
						annex:this.annex,
						type
					}).then(res=>{
						this.requestStatus = false
						this.jump('/pages/preview/preview?cost='+this.cost+'&annex='+this.annex+'&orderId='+res.data.order_id)
					}).catch(res=>{
						this.requestStatus = false
					})
				}
			},
			back(){
				uni.navigateBack()
			},
			getStyleName(){
				let pages = getCurrentPages()
				let prevPage = pages[pages.length-2]
				this.styleName = prevPage.list[prevPage.current].title
				this.cost = prevPage.list[prevPage.current].cost
				this.style_id = prevPage.list[prevPage.current].id
				this.tool_id = prevPage.type
			},
			jump(url){
				uni.navigateTo({
					url
				})
			},
			chooseImage(){
				// #ifdef H5
				uni.chooseImage({
					count:1,
					sourceType:['album', 'camera'],
					sizeType: ['original', 'compressed'],
					success:(res)=>{
						console.log(res)
						// this.image = res.tempFilePaths[0]
						this.upload(res.tempFilePaths[0]).then(res=>{
							this.annex = res.data.fullurl
						}).catch()
					}
				})
				// #endif
				// #ifdef MP
				uni.chooseMedia({
					count:1,
					mediaType:['image'],
					sourceType:['album', 'camera'],
					success:(res)=>{
						console.log(res)
						this.upload(res.tempFilePaths[0]).then(res=>{
							this.annex = res.data.fullurl
						}).catch()
						// this.image = res.tempFilePaths[0]
					}
				})
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: #F9F9F9;
		.style{
			padding:16rpx 28rpx 18rpx;
			.style-title{
				font-size: 28rpx;
				color: #000000;
				font-weight: 600;
			}
			.style-select{
				font-size: 28rpx;
				color: #C62323;
			}
			.style-item{
				min-width: 176rpx;
				height: 68rpx;
				padding:0 20rpx;
				text-align: center;
				margin-top: 32rpx;
				font-size: 28rpx;
				color: #3AC9B5;
			}
		}
		.setting{
			background-color: #ffffff;
			border-radius: 40rpx 40rpx 0 0;
			padding:34rpx 28rpx;
			.setting-textarea{
				height:292rpx;
				background-image: url('@/static/image/border3.png');
				background-size: 100%;
				position: relative;
				.before_title{
					position: absolute;
					top: 20rpx;
					left: 20rpx;
					font-size: 28rpx;
				}
				.textarea{
					height: 100%;
					width: 100%;
					border:none;
					display: block;
					padding:20rpx;
					font-size: 28rpx;
					text-indent: 7ch;
				}
			}
			.setting-title{
				font-size: 28rpx;
				margin-top: 36rpx;
				font-weight: bold;
			}
			.setting-upfile{
				width: 220rpx;
				height: 220rpx;
				margin-top: 32rpx;
				.upfile-add{
					width: 100%;
					height: 100%;
				}
			}
		}
		.footer{
			height: 114rpx;
			.footer-fixed{
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				padding:6rpx 30rpx 20rpx;
			}
			&-btn{
				height: 88rpx;
				background-image: linear-gradient(270deg,#17FEE9,#94FDC4);
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
			}
			&-btn2{
				height: 88rpx;
				background-color: #F3F3F3;
				line-height: 88rpx;
				text-align: center;
				border-radius: 44rpx;
				color:#9A9A9A;
				width: 266rpx;
				margin-right: 20rpx;
				font-size: 32rpx;
			}
		}
	}
</style>
